<template>
	<view class="content">
		<uni-nav-bar @clickLeft="goBack()" :statusBar="true">
			<view slot="left">
				<uni-icons class="input-uni-icon" type="back" size="22" color="#666666" />
			</view>
			<view>
				<uni-search-bar @confirm="search" :radius="30" ></uni-search-bar>
			</view> 
		</uni-nav-bar>
		
		<!--标签分组-->
		<view class="content_3">
			<view :class="[rent_status == 2 ? 'tab_view_active' : 'tab_view']" @click="ChooseRent(2)">已出租</view>
			<view :class="[rent_status == 1 ? 'tab_view_active' : 'tab_view']" @click="ChooseRent(1)">未出租</view>
		</view>
		<!--房屋列表-->
		<view class="content_1">
			<block v-for="(item_house, index_house) in houseList" :key='index_house'>
				
				<!--未出租房屋-->
				<view class="house_view" @click.stop="toUpdateroom(index_house)" v-if="item_house.status == '1' && rent_status == '2'">
					<image class="house_img" :src="getPath(item_house.house_image)"></image>
					<view class="house_detail">
						<view class="house_name">{{item_house.house_name}}</view>
						<view class="house_info">{{item_house.house_direction}}{{item_house.house_area}}{{item_house.house_floor}}</view>
						<view class="house_info">{{item_house.house_addr}}</view>
						<view class="house_tips">
							<view class="tips">{{item_house.house_type}}</view>
							<view class="tips">配置齐全</view>
						</view>
						<view class="house_money">¥ {{item_house.house_money}}/月</view>
					</view>
					<!-- <view class="copy" @click.stop="toUpdate('copy', index_house)">复制</view> -->
					<!-- <view class="update" @click.stop="toUpdate('edith', index_house)">编辑</view> -->
				</view>
				
				<!--已出租房屋-->
				<view class="house_view" @click.stop="toUpdateroom(index_house)" v-if="item_house.status == '2' && rent_status == '1'">
					<image class="house_img" :src="getPath(item_house.house_image)"></image>
					<view class="house_detail">
						<view class="house_name">{{item_house.house_name}}</view>
						<view class="house_info">{{item_house.house_direction}}{{item_house.house_area}}{{item_house.house_floor}}</view>
						<view class="house_info">{{item_house.house_addr}}</view>
						<view class="house_tips">
							<view class="tips">{{item_house.house_type}}</view>
							<view class="tips">配置齐全</view>
						</view>
						<view class="house_money">¥ {{item_house.house_money}}/月</view>
					</view>
					<view class="copy" @click.stop="toUpdate('copy', index_house)">复制</view>
					<view class="update" @click.stop="toUpdate('edith', index_house)">编辑</view>
				</view>
			</block>
		</view>
		<!--创建出租屋-->
		<view class="content_2" @click="toUpdate('create')">
			创建出租屋
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {Request} from '../../../../utils/request.js';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				houseList: [],
				rent_status: '1',
				searchText: '',
			}
		},
		methods: {
			search: function(res) {
				this.searchText = res.value
				this.requestList();
			},
			//跳转回首页
			goBack: function() {
				uni.switchTab({
				    url: '/pages/mine/mine?userstate=owner'
				});
			},
			//获取图片路径
			getPath: function(imagePath) {
				return app.globalData.host + imagePath
			},
			//跳转编辑页面
			toUpdate: function(res, index) {
				if(res == 'create'){
					uni.navigateTo({
						url: '/pages/mine/owner/manage/update/update'
					});
				}else if(res == 'edith'){
					//如果是编辑,传房间id
					// console.log(this.houseList[index].house_id)
					uni.navigateTo({
						url: '/pages/mine/owner/manage/edithouse/update/update?house_id=' + this.houseList[index].house_id
					});
				}else if(res == 'copy'){
					new Request('landboos/Edith_Copy_House/CopyHouse').request(
						() => {
							return 'POST'
						},
						() => {
							return {
								house_id:this.houseList[index].house_id,
								openid: app.globalData.openid
							}
						},
						(res) => {
							new Request().showToast(res.data.msg);
							
							uni.request({
								url: app.globalData.host+'/api/renthouse/landboos/House_info/GetLandBoosHouseList',
								method: 'POST',
								data: {
									openid: getApp().globalData.openid
								},
								success: (res) => {
									if(res.data.code == 0){
										new Request().showToast(res.data.msg);
										return;
									}
									this.houseList = res.data.data
								}
							})
						}
					);
				}
				
			},
			//跳转房间编辑页面
			toUpdateroom: function(index) {
				uni.navigateTo({
					url: '/pages/mine/owner/manage/roomupdate/roomdate?house_id=' + this.houseList[index].house_id
				})
			},
			//选择出租状态
			ChooseRent:function (index) {
				this.rent_status = index
			},
			requestList: function() {
				this.houseList = []
				new Request('landboos/House_info/GetLandBoosHouseList').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							searchText: this.searchText,
						}
					},
					(res) => {
						if(res.data.code == 0){
							new Request().showToast(res.data.msg);
							return;
						}
						this.houseList = res.data.data
					}
				)
			}
		},
		onLoad() {
			this.requestList();
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
	.content{
		padding-bottom: 190upx;
	}
	/*
		房屋列表样式
	*/
	.content_1 {
		margin-top: 20upx;
	}

	.house_view {
		height: 246upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		padding: 27upx 24upx;
		margin-bottom: 40upx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.house_img {
		width: 304upx;
		height: 246upx;
		background-color: #8E83C7;
		margin-right: 24upx;
	}

	.house_detail {
		height: 258upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}

	.house_info {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		width: 400upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.house_tips {
		height: 30upx;
		display: flex;
	}

	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}

	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}

	.copy {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #63D0D5;
		position: absolute;
		top: 20upx;
		right: 90upx;
	}
	
	.update {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #63D0D5;
		position: absolute;
		top: 20upx;
		right: 20upx;
	}

	/*
		创建出租屋样式
	*/
	.content_2 {
		height: 72upx;
		position: fixed;
		width: 750upx;
		z-index: 999;
		background-color: #63D0D5;
		bottom: 0upx;
		left: 0upx;
		line-height: 72upx;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
	}
	
	/*
		标签分组样式
	*/
	.content_3{
		height: 100upx;
		background-color: #ffffff;
		margin-top: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0upx 150upx;
	}
	
	.tab_view{
		height: 100upx;
		font-size: 28upx;
		color: #2D2D2D;
		line-height: 100upx;
	}
	
	.tab_view_active{
		height: 100upx;
		font-size: 28upx;
		color: #63D0D5;
		line-height: 100upx;
	}
</style>
